<!DOCTYPE html>
<html>
<head>
    <title>SparkShop安装向导</title>
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/install.css?<php>echo rand(1000,9999);</php>">
    <script src="/static/js/layui/layui.js"></script>
</head>
<body>

<div class="layui-header">
    <div class="layui-container">
        <h1 class="logo">
            <a href="https://gitee.com/sparkshop/spark-shop-webman">
                <img class="pic" src="/static/images/logo.png" alt=""> <span style="margin-left: 10px;font-size: 22px!important;">SparkShop</span></a>
        </h1>
        <div class="title">安装向导</div>
    </div>
</div>

<div class="layui-content" style="padding-top: 0px;">
    <div class="layui-container">
        <div class="layui-row">

            <div class="layui-step-group">
                <div class="layui-step layui-active">
                    <div class="layui-sort">1</div>
                    <div class="layui-desc">检查安装环境</div>
                </div>
                <div class="layui-step layui-active layui-line"></div>
                <div class="layui-step layui-active">
                    <div class="layui-sort">2</div>
                    <div class="layui-desc">创建数据库</div>
                </div>
                <div class="layui-step layui-active layui-line"></div>
                <div class="layui-step layui-active ">
                    <div class="layui-sort">3</div>
                    <div class="layui-desc">安装成功</div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card layui-fixed">
                    <div class="layui-card-header">
                        <span>3 安装成功</span>
                        <span class="layui-card-version"></span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-install">
                            <div class="tips">正在安装，请稍后...</div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                            </div>

                            <div class="layui-install-logs"><li>创建数据表...</li></div>
                        </div>

                        <div class="layui-complete" style="display: none">
                            <div> <img src="/static/images/right.png" width="100px" height="100px"> </div>
                            <div class="layui-success">安装成功</div>
                            <!--<a href="/" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed" style="border-radius:5px !important;">访问前台</a>-->
                            <a href="/admin" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed" style="border-radius:5px !important;">访问后台</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="layui-footer">copyright © 2023~2024 SparkShop all rights reserved.</div>
</body>


<script type="text/javascript">
    layui.use(['jquery','layer','element'],function() {
        var layer = layui.layer;
        var jquery = layui.jquery;
        var element = layui.element;

        // GET安装脚本 交给任务线程处理
        jquery.get('/install/index/install',{},function(res){});

        // 定时检测是否安装成功
        var tasks = setInterval(function(){

            jquery.get('/install/index/progress',{},function(res){

                // 渲染进度条
                jquery('.layui-progress-bar').attr('lay-percent',res.progress) && element.render();

                // 查找当前元素
                var logsElem = jquery('.layui-install-logs');
                // 插入HTML元素
                if (res.msg !== null) {

                    var html = '';
                    if (res.code == 200) {
                        // 循环写入表数据
                        for (var i in res.msg ) {
                            var elem = 'layui-table-'+i;
                            if (jquery('.'+elem).length === 0) {
                                html += '<li class="'+ elem +'">'+res.msg[i].msg+'</li>';
                            }
                        }
                    }
                    else {
                        // 销毁定时器
                        html = '<li><font color="red">'+res.msg+'</font></li>';
                        clearInterval(tasks);
                    }

                    logsElem.append(html);
                }

                if (logsElem[0].scrollHeight >= logsElem[0].clientHeight) {
                    var scrollTop = logsElem[0].scrollHeight-logsElem[0].clientHeight;
                    logsElem.scrollTop(scrollTop);
                }

                if (parseInt(res.progress) == 100) {

                    jquery('.layui-install').remove();
                    jquery('.layui-complete').show();

                    // 清理安装包
                    jquery.get('/install/index/clear',{},function(res){});
                    return clearInterval(tasks);
                }
            });

        },500);
    })
</script>
</html>